<template>
    <div class="pagination-container">
        <el-pagination background layout="total,  prev, pager, next, jumper" :current-page="currentPage"
            :page-size="pageSize" :total="total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
    </div>
</template>

<script setup>
import { defineProps, defineEmits, computed } from 'vue';

// 定义接收的属性
const props = defineProps({
    modelValue: {
        type: Object,
        required: true,
        validator(value) {
            return 'currentPage' in value && 'pageSize' in value;
        }
    },
    total: {
        type: Number,
        required: true
    }
});

// 定义发出的事件
const emit = defineEmits(['update:modelValue', 'change']);

// 计算属性来简化更新逻辑
const currentPage = computed({
    get() {
        return props.modelValue.currentPage || 1; // 默认值为1
    },
    set(newPage) {
        emit('update:modelValue', { ...props.modelValue, currentPage: newPage });
    }
});

const pageSize = computed({
    get() {
        return props.modelValue.pageSize || 10; // 默认值为10
    },
    set(newPageSize) {
        emit('update:modelValue', { ...props.modelValue, pageSize: newPageSize });
    }
});

// 处理每页条数变化
const handleSizeChange = (newPageSize) => {
    console.log('Page size changed to:', newPageSize);
    pageSize.value = newPageSize;
    emit('change', currentPage.value, newPageSize);
};

// 处理当前页变化
const handleCurrentChange = (newPage) => {
    console.log('Current page changed to:', newPage);
    currentPage.value = newPage;
    emit('change', newPage, pageSize.value);
};
</script>

<style scoped>
.pagination-container {
    margin-top: 20px;
}
</style>